<template>
  <div style="height:600px;background-color:white">
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1" @click="comName='manageUser'">管理用户</el-menu-item>
          <el-menu-item index="3" @click="comName='manageShop'">管理店铺</el-menu-item>
        </el-menu>
      </el-header>
      <el-container style="height:500px">
        <el-main>
            <transition>
            <component :is="comName"></component>
            </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import manageUser from '../views/manageUser.vue'
import manageShop from '../views/manageShop.vue'
import Vue from 'vue'
Vue.component('manageUser',manageUser);
Vue.component('manageShop',manageShop);
export default {
    data(){
        return{
            comName:'manageUser',
            activeIndex2:"1"
        }
    },
    methods:{
      handleSelect(index){
        console.log(index);
        console.log(this.activeIndex2);
      }
    }
}
</script>
<style>
    .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }
</style>